<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>chart</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
	body{
		/* font-family: 'Noto Sans','KaiTi',sans-serif; */
		/* background-color: rgb(241, 241, 241); */
	}
	.flex{
		display:flex;
	}
	.mid{
		/* border:1px solid black; */
		width:1260px;
		margin:0 auto;
	}
	.outside-left{
		margin-left:20px;
		margin-right:20px;
		/* border:1px solid black; */
		width:620px;
		height:400px;
		border-radius:15px;
		margin-top:10px;
		margin-bottom:10px;
		box-shadow: rgb(172, 163, 163) 0px 1px 1px 1px;
	}
	.outside-right{
		
		margin-right:20px;
		/* border:1px solid black; */
		width:620px;
		height:400px;
		border-radius:15px;
		margin-top:10px;
		margin-bottom:10px;
		box-shadow: rgb(172, 163, 163) 0px 1px 1px 1px;
	}
	.table{
		margin-left:10px;
		margin-top:10px;

	}
	.title{
		font-size:28px;
	}
	.item{
		margin-left:30px;
		font-size:20px;
	}
	.pic{
		margin:0 auto;
		margin-top:10px;
		width:600px;
		height:360px;
	}
	.yearSelectBox{
		width: 90px;
		border-radius:8px;
	}
	.monthSelectBox{
		width: 70px;
		border-radius:8px;
	}
	.options-top{
		border-radius:5px;
		margin-top:2px;
		box-shadow: 0;

	}
	.pic-right{
		width: 560px;
		float: left;
		margin-left:20px
	}
	.rank-span{
		width: 600px;
		margin-top: 10px;
		text-align: center;
		line-height: 40px;
		border-bottom:2px solid #727272c4;
	}
	.span{
		margin: 0 60px 0 60px;
	}
	.span-2{
		margin-left: 76px;
	}
	.span-3{
		margin-left: 136px;
	}
</style>
<body>
	<div class="mid" id="form-app">
		<div class="flex">
			<div class="outside-left">
				<form action="#" method="post" class="table">
					<label class="title">业绩汇总情况</label>
					<select id="sale-year-select" class="item yearSelectBox" name="witch_year" @change="changeYear($event,'sale')">			
						<option v-for="(year,index) in years_sale" :value='index'>{{ year }}年</option>
					</select>
					<select id="sale-month-select" class="item monthSelectBox" @change="changeMonth($event,'sale')">
						<option v-for="(month,index) in months_sale" :value='index'>{{ month }}</option>	
					</select>
				</form>	
					
				<div id = "summary_pic" class="pic">
				</div>
			</div>
			<div class="outside-right">
				<form action="#" method="post" class="table">
					<label class="title">客户来源情况</label>
					<select class="item yearSelectBox" @change="changeYear($event,'customer')">			
						<option v-for="(year,index) in years_customer" :value='index'>{{ year }}年</option>
					</select>
					<select class="item monthSelectBox')" @change="changeMonth($event,'customer')">			
						<option value="" v-for="(month,index) in months_customer" :value='index'>{{ month }}</option>
					</select>
				</form>		
				<div id = "customer_source_pic" class="pic pic-right">
				
				</div>
			</div>
		
		</div>

		<div class="flex">
			<div class="outside-left">
				<form action="#" method="post" class="table">
					<label class="title">客户量情况</label>
					<select class="item yearSelectBox" @change="changeYear($event,'count')">			
						<option v-for="(year,index) in years_count" :value='index'>{{ year }}年</option>
					</select>
					<select class="item monthSelectBox" @change="changeMonth($event,'count')">			
						<option value="" v-for="(month,index) in months_count" :value='index'>{{ month }}</option>
					</select>
				</form>		
				<div id = "customer_count_pic" class="pic">
				
				</div>
			</div>
			<div class="outside-right">
				<form action="#" method="post" class="table">
					<label class="title">排行榜</label>
					<select class="item yearSelectBox" @change="changeYear($event,'rank')">			
						<option v-for="(year,index) in years_count" :value='index'>{{ year }}年</option>
					</select>
					<select class="item monthSelectBox" @change="changeMonth($event,'rank')">			
						<option value="" v-for="(month,index) in months_count" :value='index'>{{ month }}</option>
					</select>
				</form>	
				<div class="rank-span">
					<span class="span">排名</span>
					<span class="span">姓名</span>
					<span class="span">订单合计金额</span>
				</div>	
				<form id = "rank_form" class="pic" action="#">
					<ul v-for="item in rank['rank_data']">
						<span class="span">{{ item.ranking }}</span>
						<span class="span-2">{{ item.name }}</span>
						<span class="span-3">{{ item.total_value }}</span>
					</ul>
					
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el:'#form-app',
		data:{
			years_sale:[],
			months_sale:[],
			years_customer:[],
			months_customer:[],
			years_count:[],
			months_count:[],
			years_rank:[],
			months_rank:[],
			sale:{
				year:2021,
				month:'full',
				title:'',
				form_type:'bar',
				sale_data:[
				]
			},
			customer:{
				year:2021,
				month:'full',
				title:'',
				form_type:'pie',
				customer_data:[
				]
			},
			count:{
				year:2021,
				month:'full',
				title:'',
				form_type:'line',
				count_data:[	
				]
			},
			rank:{
				year:2021,
				month:'full',
				type:'rank',
				rank_data:[
				]
			}
		},
		methods:{
			// 画业绩汇总图
			draw_sale:function(){
				var myChart = echarts.init(document.getElementById('summary_pic'));
				
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '	'
					},
					tooltip: {},
					legend: {
						data:['']
					},
					xAxis: {
						data:this.sale['sale_data'][0]
					},
					yAxis: {},
					series: [{
						name: '',
						type: this.sale['form_type'],
						data: this.sale['sale_data'][1]
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
			//画客户来源图
			draw_customer:function(){
				var myChart = echarts.init(document.getElementById('customer_source_pic'));
				option = {
				title: {
					text: '',
				},
				tooltip: {
					// trigger: 'item'
				},
				
				series: [
					{
						name: '',
						type: 'pie',
						radius: '60%',
						data: this.customer['customer_data'],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]};
				myChart.setOption(option);
			},
			draw_count:function(){
				var myChart = echarts.init(document.getElementById('customer_count_pic'));
				option = {
					xAxis: {
						type: 'category',
						data:this.count['count_data'][0]
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.count['count_data'][1],
						type: 'line'
				}]};
				myChart.setOption(option);
			},
			getSaleDataByYear:function(year){
				var that = this;
				axios.get('http://192.168.0.109:8080/yxkh/admin_get_performance_summary_by_year',{
					params:{
					'year':year,
					'admin_id':1001,
					}
				})
				.then(function(response) {
					full_month=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
					if (year === new Date().getFullYear()){
						month_num = new Date().getMonth()+1;
						that.sale['sale_data'][1]=that.copyArray(response['data']['single_month'],0,month_num);
						///
						that.sale['sale_data'][0] = that.copyArray(full_month,0,month_num);
						
					}else{
						that.sale['sale_data'][1]=response['data']['single_month'];
						///
						that.sale['sale_data'][0] = full_month;
					}
					that.draw_sale();
				}
			)},
			getSaleDataByMonth:function(year,month){
				var that = this;
				axios.get("http://192.168.0.109:8080/yxkh/admin_get_performance_summary_by_month",{params:{
					'year':year,
					'month':month,
					'admin_id':1001
				}}).then(function(response) {
					full_month=that.generateDays(year,month);
					that.sale['sale_data'][1]=that.copyArray(response['data']['single_day'],0,full_month.length);
					that.sale['sale_data'][0] =that.copyArray(full_month,0,full_month.length);
					that.draw_sale();
				}
			)},
			generateDays:function(year,month){
				days=[]
				var date = new Date(year,month,0);
				day_num = date.getDate();
				for(i=0;i<day_num;i++){
					days[i] = i+1;
				}
				return days;
			},
			generateMonths:function(year){
				full_month=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
				res=[]
				if(year === new Date().getFullYear()){
					month= new Date().getMonth()+1;
					res = this.copyArray(full_month,0,month);
					return res;
				}
				return full_month;
			},

			copyArray:function(array,begin,end){
				res=[];
				j = 0;
				for(i=begin;i<end;i++){
					res[j] = array[i];
					j++;
				}
				return res;
			},

			//##########################客户来源########################
			getCustomerDataByYear:function(year){
				var that = this;
				axios.get("http://192.168.0.109:8080/yxkh/admin_get_customer_source_by_year",{
					params:{
						'year':year,
						'admin_id':1001
					}
				}).then(function(response){
					that.customer['customer_data'] = response['data'];
					that.draw_customer();
				})
			},
			getCustomerDataByMonth:function(year,month){
				var that = this;
				axios.get("http://192.168.0.109:8080/yxkh/admin_get_customer_source_by_year",{
					params:{
						'year':year,
						'month':month,
						'admin_id':1001
					}
				}).then(function(response){
					that.customer['customer_data'] = response['data'];
					that.draw_customer();
				})
			},
			//##################客户量#########################//
			getCountDataByYear:function(year){
				var that = this;
				axios.get('http://192.168.0.109:8080/yxkh/admin_get_customer_volume_by_year',{
					params:{
					'year':year,
					'admin_id':1001,
					}
				})
				.then(function(response) {
					full_month=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
					if (year === new Date().getFullYear()){
						month_num = new Date().getMonth()+1;
						that.count['count_data'][1]=that.copyArray(response['data']['single_month'],0,month_num);
						///
						that.count['count_data'][0] = that.copyArray(full_month,0,month_num);
						
					}else{
						that.count['count_data'][1]=response['data']['single_month'];
						///
						that.count['count_data'][0] = full_month;
					}
					that.draw_count();
				}
			)},
			getCountDataByMonth:function(year,month){
				var that = this;
				axios.get("http://192.168.0.109:8080/yxkh/admin_get_customer_volume_by_month",{
					params:{
						'year':year,
						'month':month,
						'admin_id':1001
				}}).then(function(response) {
					full_month=that.generateDays(year,month);
					that.count['count_data'][1]=that.copyArray(response['data']['single_day'],0,full_month.length());
					that.count['count_data'][0] =that.copyArray(full_month,0,full_month.length());
					that.draw_count();
				}
			)},
			//###################排行榜################
			getRankByYear:function(year){
				var that = this;
				axios.get("http://192.168.0.109:8080/yxkh/get_ranking_list_by_year",{
					params:{
						'year':year,
						'admin_id':1001
					}
				}).then(function(response){
					that.rank['rank_data'] = response["data"]
				})
			},
			getRankByMonth:function(year,month){
				var that = this;
				axios.get("http://192.168.0.109:8080/yxkh/get_ranking_list_by_year",{
					params:{
						'year':year,
						'month':month,
						'admin_id':1001
					}
				}).then(function(response){
					that.rank['rank_data'] = response["data"]
				})
			},
			//##############按钮逻辑##########################
			initSelectBtn:function(){
				date = new Date();
				all_years=[];
				curr_months=['全年'];
				this.months_sale = curr_months.concat(this.generateMonths(date.getFullYear()));
				this.months_customer = curr_months.concat(this.generateMonths(date.getFullYear()));
				this.months_count = curr_months.concat(this.generateMonths(date.getFullYear()));
				this.months_rank = curr_months.concat(this.generateMonths(date.getFullYear()));
				for(i=0;i<date.getFullYear() - 2017;i++){
					all_years[i] = date.getFullYear()-i;
				}
				this.years_sale = all_years;
				this.years_customer = all_years;
				this.years_count = all_years;
				this.years_rank = all_years;
				this.sale['year'] = date.getFullYear();
				this.customer['year'] = date.getFullYear();
				this.count['year'] = date.getFullYear();
				this.rank['year'] = date.getFullYear();
			},
			changeYear:function(arg,func){
				var year_index = arg.target.value;
				switch(func){
					case 'sale':
						this.sale['year'] = this.years_sale[year_index];
						//this.getSaleDataByYear(this.years_sale[year_index]);
						this.months_sale = ['全年'].concat(this.generateMonths(this.years_sale[year_index]));
						break;
					case 'customer':
						this.customer['year'] = this.years_customer[year_index];
						//this.getCustomerDataByYear(this.years_customer[year_index]);
						this.months_customer = ['全年'].concat(this.generateMonths(this.years_customer[year_index]));
						break;
					case 'count':
						this.count['year'] = this.years_count[year_index];
						//this.getCountByYear(this.years_count[year_index]);
						this.months_count = ['全年'].concat(this.generateMonths(this.years_count[year_index]));
						break;
					case 'count':
						this.rank['year'] = this.years_rank[year_index];
						//this.getRankByYear(this.years_rank[year_index]);
						this.months_rank = ['全年'].concat(this.generateMonths(this.years_rank[year_index]));
						break;
				}
			},
			changeMonth:function(arg,func){
				var month_index = arg.target.value;
				console.log(month_index)
				switch(func){
					case 'sale':
						curr_year = this.sale['year'];
						if(month_index === 0){
							this.getSaleDataByYear(curr_year);
							break;
						}
						this.getSaleDataByMonth(curr_year,month_index);
						break;
					case 'customer':
						curr_year = this.customer['year'];
						if(month_index === 0){
							this.getCustomerDataByYear(curr_year);
							break;
						}
						this.getCustomerDataByMonth(curr_year,month_index);
						break;
					case 'count':
						curr_year = this.count['year'];
						if(month_index === 0){
							this.getCountDataByYear(curr_year);
							break;
						}
						this.getCountDataByMonth(curr_year,month_index);
						break;
					case 'rank':
						curr_year = this.rank['year'];
						if(month_index === 0){
							this.getRankDataByYear(curr_year);
							break;
						}
						this.getRankDataByMonth(curr_year,month_index);
						break;
				}
			}
		},
		mounted(){
			this.initSelectBtn();
			this.getSaleDataByYear(new Date().getFullYear());
			this.getCustomerDataByYear(new Date().getFullYear());
			this.getCountDataByMonth(new Date().getFullYear());
			this.getRankByYear(new Date().getFullYear());
		},
	})

</script>
</html>